<template>
    <div class="box">
        <div class="menu h100 ovy">
            <div style="padding: 10px; display: flex; flex-direction: column">
                <el-input type="text" v-model="value" placeholder="输入关键字进行检索"/>
                <template  v-for="(v,i) in data" >
                    <el-divider  content-position="center" v-if="v.divider">{{v.name}}</el-divider>
                    <template v-else>
                        <el-link v-if="(!value || v.name.indexOf(value) > -1)" class="link" :underline="false" type="primary" href="javascript:;" @click.native="go(i,v)">{{getMenuName(v.name)}}</el-link>
                    </template>
                </template>
            </div>
        </div>
        <router-view class="page h100 ovy" />
    </div>
</template>
<script>
    export default {
        data(){
            return {
                apis: [],
                data: {},
                _data: {},
                value: "",
                timer : null
                // current: null
            }
        },
        watch: {
            // value(nv){
            //     if(this.timer){
            //         clearTimeout(this.timer);
            //     }
                // this.timer = setTimeout(() => {
                //     this.timer = null;
                //     nv = nv.trim();
                //     if(!nv){
                //         this._data = Object.assign({} , this.data);
                //     } else {
                //         var d = {};
                //         for(var i in this.data){
                //             if(this.data[i].name.indexOf(nv) > -1){
                //                 this._data[i] = this.data[i];
                //             }
                //         }
                //         this._data = d;
                //     }
                // },100);
            // }
        },
        methods:{
            go(i,v){
                console.log(i,v)
                this.$router.push({
                    name: v.path || i
                })
            },
            getMenuName(name){
                return name;
            }
        },
        mounted() {
            import("../router/api.js")
                .then(e => {
                    this.apis = e.default;
                    return Promise.all(this.apis
                        .map(e => {
                            if(e.indexOf("---") > -1){
                                return new Promise((ok,err) => {
                                    ok({
                                        default: {
                                            divider: true,
                                            name: e.replace(/-/g,"")
                                        }
                                    });
                                });
                            } else if(e.indexOf("$") === 0){
                                var i = e.indexOf(":");
                                return new Promise((ok,err) => {
                                    ok({
                                        default: {
                                            divider: false,
                                            name: e.substring(i+1),
                                            path: e.substring(1,i)
                                        }
                                    });
                                });
                            } else {
                                return import(`../doc/${e}.js`)
                            }
                        }))
                })
                .then(items => {
                    var i = 0;
                    var ret = {};
                    items.forEach(e => {
                        ret[this.apis[i++]] = e.default;
                    });
                    this.data = ret;

                    // for(var i in this.data){
                    //     this.current = this.data[i];
                    //     break;
                    // }
                    // console.log(this.data)
                });
        }
    }
</script>
<style scoped>
    .box{
        display: flex;
    }
    .menu{
        width: 200px;
        /*text-align: center;*/
    }
    .page{
        flex: 1;
    }
    .link{
        margin-top: 5px;
        display: block;
        margin-left: 10px;
        font-size: 13px;
    }
    .el-divider__text{
        padding: 0 10px;
        font-size: 13px;
    }
</style>